<template>
  <section :class="{
    'pages': true,
    'pages-header': top,
    'pages-tabbar': bottom
  }">
    <slot name="header" />
    <section class="pages-main" :style="{
      top: `${top}px`
    }">
      <pages-content :style="{
        'bottom': `${bottom ? `${bottom}px` : ''}`
      }">
        <slot />
      </pages-content>
      <pages-tabbar v-if="tabbar && status" />
    </section>
  </section>
</template>

<script>
  import pagesTabbar from './Tabbar'
  import pagesContent from './Content'
  export default {
    name: "pages",
    data() {
      return {
        top: 0,
        bottom: 0
      }
    },
    components:{
      pagesContent,
      pagesTabbar
    },
    computed: {
      tabbar() {
        return this.$route.meta.tabbar
      },
      status() {
        return this.$store.state.options.beforeStatus
      },
    },
  }
</script>
